<template>
  <div class="page">
    <el-row>
      <div style="margin-bottom: 10px">
        <el-input v-model.trim="code" placeholder="输入楼盘名字进行搜索" style="width: 80%"></el-input>
        <el-button type="primary" style="width: 20%" @click="onSubmit" size="medium">查询</el-button>
      </div>
    </el-row>
    <div v-loading.fullscreen.lock="fullscreenLoading">
      <template v-if="list.length>0">
        <div ref="scroll0" class="scroll-list"
             style="white-space:nowrap;flex:1;overflow:hidden;display:flex;flex-flow:column;height: calc(100vh - 40px);">
          <div class="scroll-content">
            <div class="card_test" v-for="item in list" :key="item.id" @click="showDetail(item)">
              <div style="display: flex;">




































































































































































































































































































































































































































































































































































































































































































































































































































                <el-col class="text-center text-bold margin-lr-lg text-ellipsis" :span="24">
                  <span>{{ item.name }}</span>
                </el-col>
              </div>
              <div class="margin-top flex justify-between align-center" style="border: 1px solid #ddd;padding: 10px 10px 5px 10px;border-radius: 10px;" v-for="(o, i) in item.list_customer">
                <div class="text-ellipsis" style="width: 30%;align-self: start;">{{ o.name }}</div>
                <div class="flex-direction" style="width: 70%;">
                  <div class="flex justify-end align-center text-sm margin-bottom-xs" v-for="(o2, i) in o.list">
                    <div class="text-ellipsis">
                      <span v-if="o2.order_type===2" class="text-blue">（{{ o2.order_type_disp_name }}）</span>
                      <span v-if="o2.order_type===3" class="text-red">（{{ o2.order_type_disp_name }}）</span>
                      <span v-if="o2.order_type===4" class="text-orange">（{{ o2.order_type_disp_name }}）</span>
                      <span v-if="o2.order_type===1 || o2.order_type===8" class="text-green">（{{ o2.order_type_disp_name }}）</span>
                      <span v-if="o2.order_type===5" class="text-grey">（{{ o2.order_type_disp_name }}）</span>
                      <span v-if="o2.order_type===7" class="text-purple">（{{ o2.order_type_disp_name }}）</span>
                      <span>《{{ o2.order_name }}》</span>
                    </div>
                    <div><span>（{{ o2.installed_total_num }}/{{ o2.total_num }}）</span></div>
                  </div>
                </div>
              </div>
              <div class="flex justify-end align-center margin-top" v-for="(o, i) in item.list">
                <div class="text-ellipsis text-sm">
                  <span v-if="o.order_type===2" class="text-blue">（{{ o.order_type_name }}）</span>
                  <span v-if="o.order_type===3" class="text-red">（{{ o.order_type_name }}）</span>
                  <span v-if="o.order_type===4" class="text-orange">（{{ o.order_type_name }}）</span>
                  <span v-if="o.order_type===1 || o.order_type===8" class="text-green">（{{ o.order_type_name }}）</span>
                  <span v-if="o.order_type===5" class="text-grey">（{{ o.order_type_name }}）</span>
                  <span v-if="o.order_type===7" class="text-purple">（{{ o.order_type_name }}）</span>
                  <span>《{{ o.order_name }}》</span>
                </div>
                <div><span>（{{ o.installed_total_num }}/{{ o.total_num }}）</span></div>
              </div>
            </div>
            <div v-if="isEnd" class="text-gray text-center text-df">这里到底啦</div>
          </div>
        </div>
      </template>
      <div v-if="list.length==0" style="text-align: center">
        暂无数据
      </div>
    </div>
  </div>
</template>

<script>
import {
  getBuildingList
} from "@/api/app/worker.js";
import {
  Message
} from 'element-ui';
import {
  cloneDeep
} from 'lodash';
import {
  setAppToken,
  removeAppToken,
  setAppCompanyId,
  removeAppCompanyId
} from '@/utils/auth'
import BScroll from "@better-scroll/core";
import Pullup from "@better-scroll/pull-up";
import emptyImg from "@/components/EmptyImg";

BScroll.use(Pullup);
export default {
  beforeCreate() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#FFFFFF");
  },

  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
    this.bscroll && this.bscroll.destroy();
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy();
    next();
  },
  activated() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#FFFFFF");
  },
  deactivated() {
    document.querySelector("body").removeAttribute("style");
    this.bscroll = null;
  },
  components: {
    emptyImg
  },
  data() {
    return {
      code: null,
      isEnd: false,
      list: [],
      listParams: {
        page: 1,
        page_size: 10
      },
      bscroll: null,
      isPullUpLoad: false,
      // isPullDownLoad: false,
      bsOptions: {
        scrollY: true,
        click: true,
        /* pullDownRefresh: {
          threshold: 90,
          stop: 10
        }, */
        pullUpLoad: true,
        bounce: {
          top: true,
          bottom: true
        }
      },

      curTab: '0',
      fullscreenLoading: false,
      token: '',
      companyId: '',
    }
  },
  created() {
    this.getParams()
    this.listParams = Object.assign(this.listParams, {});
    this.getList(false)
      .then(() => {
        this.initBScroll();
      })
  },
  methods: {
    showDetail(row) {
      let that = this;
      that.$router.push({
        path: '/app/view/app_view_building_device',
        query: {
          id: row.id,
          lat: row.lat,
          lng: row.lng
        }
      })
    },
    getParams() {
      const url = window.location.href;
      if (url.indexOf('?') != -1) {
        var cs = window.location.href.split('?')[1]; //获取?之后的参数字符串
        var cs_arr = cs.split('&'); //参数字符串分割为数组
        var cs = {};
        for (var i = 0; i < cs_arr.length; i++) { //遍历数组，拿到json对象
          cs[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
        }
        if (!!cs['token']) {
          this.token = decodeURI(cs['token']);
          setAppToken(this.token);
        } else {
          removeAppToken();
        }
      }
    },
    resetPage() {
      const that = this;
      that.list = [];
      that.isEnd = false;
      that.listParams.page = 1;
      that.listParams.page_size = 10;
      that.bscroll = null;
    },
    onSubmit() {
      this.resetPage();
      this.getList(false);
    },
    getList(add = true) {
      const that = this;
      if (!that.isEnd) {
        that.fullscreenLoading = true;
        const params = Object.assign({
          code: this.code
        }, this.listParams)
        return getBuildingList(params)
          .then(({
                   data: {
                     current,
                     pages,
                     total,
                     records,
                     size
                   }
                 }) => {
            that.fullscreenLoading = false;
            if (add) {
              that.list = (that.list || []).concat(records || []);
            } else {
              that.list = records || [];
            }
            that.listParams.page++;
            let flag = (total / size) <= current;
            if (flag) {
              that.isEnd = true;
            }
            that.initBScroll();
          })
      }
    },
    initBScroll() {
      const that = this;
      that.$nextTick(() => {
        const $scrollRef = that.$refs['scroll' + that.curTab];
        if (!$scrollRef) return false;
        $scrollRef.hasVerticalScroll = true;
        if (!that.bscroll) {
          that.bscroll = new BScroll($scrollRef, that.bsOptions);
          that.bscroll.on("pullingUp", () => {
            that.getList().then(() => {
              that.$nextTick(() => {
                that.bscroll.finishPullUp();
                that.bscroll.refresh();
                // this.isPullDownLoad = false;
                that.isPullUpLoad = false;
              });
            });
          });
          /* this.bscroll.on("pullingDown", () => {
            this.isEnd = false;
            this.list = [];
            this.listParams = {
              pageNum: 1,
              pageSize: 10
            };
            this.getList(1).then(() => {
              this.$nextTick(() => {
                this.bscroll.finishPullDown();
                this.bscroll.refresh();
                this.isPullDownLoad = false;
                this.isPullUpLoad = false;
              });
            });
          }); */
        } else {
          that.bscroll && that.bscroll.refresh();
        }
      });
    },
    filterData(val){
      // 百分比必须为0-100，否则报错[Vue warn]:Invalid prop:custom validator check failed for prop "percentage"
      let result = 0
      if(val >0&&(val<=1)){
        result = parseFloat((val * 100).toPrecision(12))
      }
      return result
    },
    progressFormat(item) {
      return ()=>{
        return '(' + item.installed_total_num + '/' + item.total_num +')'
      }
    }
  }
};
</script>

<style scoped type="text/css">
.card_test {
  box-shadow: 1px 1px 10px 1px #bbb;
  margin: 20px 15px;
  padding: 20px;
  min-width: 20px;
  min-height: 30px;
  border-radius: 10px;
}
</style>
<style scoped lang="scss">
.page {
  font-size: 14px;
}

.scroll-list {
  padding: 0 10px;

  .scroll-content {
    .card {
      display: flex;
      flex-flow: column;
      padding: 11px;
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      min-height: 74px;
      box-sizing: border-box;
      margin: 15px 0;
      box-shadow: 1px 1px 10px 1px #eee;

      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        div:nth-child(1) {
          width: 100%;
          white-space: normal;
          font-size: 16px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(36, 36, 36, 1);
          line-height: 22px;
        }

        div:nth-child(2) {
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(134, 134, 134, 1);
          line-height: 17px;
        }
      }

      .tip {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 18px;
        font-size: 13px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(88, 88, 88, 1);
        line-height: 18px;
        margin-top: 11px;
      }
    }
  }
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
